<template>
  <div>
    <el-dialog
      :title="diaInfo.isAdd ? '添加管理员' : '编辑管理员'"
      :visible.sync="diaInfo.isShow"
      center
      :before-close="cancel"
    >
      <el-form ref="userRef" :model="userForm" :rules="rules">
        <el-form-item label="所属角色" prop="roleid">
          <el-select v-model="userForm.roleid" placeholder="请选择">
            <el-option
              v-for="item in $store.getters['role/getRole']"
              :key="item.id"
              :label="item.rolename"
              :value="item.id"
            ></el-option>
            <!-- <el-option label="区域二" value="beijing"></el-option> -->
          </el-select>
        </el-form-item>
        <el-form-item label="用户名称" prop="username" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="userForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="userForm.password"></el-input>
        </el-form-item>
        <el-form-item class="switch">
          状态
          <el-tooltip :content="'Switch value: ' + value" placement="top">
            <el-switch
              v-model="userForm.status"
              active-color="#13ce66"
              inactive-color="#ccc"
              :active-value="1"
              :inactive-value="2"
            >
            </el-switch>
          </el-tooltip>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapActions, mapGetters } from "vuex";
import { userAdd, userInfo, userEdit } from "../../request/api.js";
export default {
  props: ["diaInfo"],
  data() {
    return {
      userForm: {
        roleid: "", //角色编号
        username: "", //管理员名称
        password: "", //密码
        status: 1, //状态  1正常2禁用
      },
      formLabelWidth: "80px",
      // value: 1,
      value: "1",
      rules: {
        username: [
          { required: true, message: "请输入管理员名称", trigger: "blur" },
          { min: 2, max: 8, message: "长度在 2 到 8 个字符", trigger: "blur" },
        ],
        roleid: [{ required: true, message: "请选择所属角色", trigger: "change" }],
      },
    };
  },
  methods: {
    // 辅助函数
    ...mapActions({
      getRole: "role/getRoleListAction",
      getUser: "user/getUserListAction",
      getCount: "user/getUserCount",
    }),
    // 封装一个清空方法
    reset() {
      this.userForm = {
        roleid: "", //角色编号
        username: "", //管理员名称
        password: "", //密码
        status: 1, //状态  1正常2禁用
      };
      this.$refs.userRef.resetFields();
    },
    // 封装一个取消方法
    cancel() {
      this.$emit("cancel", false);
      this.reset();
    },
    // 封装一个数据回显
    async lookup(uid) {
      let res = await userInfo({ uid });
      console.log(res, uid);
      this.userForm = res.list;
      // 密码为空则不修改
      this.userForm.password = "";
      this.userForm.uid = uid;
    },
    // 封装一个确认方法
    confirm() {
      this.$refs.userRef.validate((val) => {
        // console.log(this.userForm);
        // return;
        if (val) {
          // 添加
          if (this.diaInfo.isAdd) {
            userAdd(this.userForm).then((res) => {
              // console.log(res);
              if (res.code == 200) {
                this.$message.success(res.msg);
                // 调用取消 关闭弹窗
                this.cancel();
                // 获取列表
                this.getUser();
                // 获取总条数
                this.getCount();
              } else {
                this.$message.error(res.msg);
              }
            });
          } else {
            userEdit(this.userForm).then((res) => {
              // console.log(res);
              if (res.code == 200) {
                this.$message.success(res.msg);
                // 调用取消 关闭弹窗
                this.cancel();
                // 获取列表
                this.getUser();
              } else {
                this.$message.error(res.msg);
              }
            });
          }
        }
      });
    },
  },
  mounted() {
    // 减少对服务器发起的请求，如何实现 判断角色管理是否存在
    if (
      !this.$store.getters["role/getRole"] ||
      this.$store.getters["role/getRole"].length == 0
    ) {
      // 调用角色行动
      this.$store.dispatch("role/getRoleListAction");
    }
  },
  watch: {},
  computed: {
    ...mapGetters({
      // rolelist:'role/getRole'
    }),
  },
  filters: {},
  components: {},
};
</script>
<style scoped>
.switch {
  margin-left: 40px;
}
</style>
